<template>
  <div class="card">
    <a-spin :spinning="loading">
      <a-table bordered :columns="columns" :data-source="data" :rowKey="(record, index) => index" :pagination="false">
        <span slot="state" slot-scope="text, record">
          <a-button shape="round" :type="record.state_desc == '未分润' ? '' : 'primary'" @click="onPush(record.date)">
            {{ record.state_desc }}
          </a-button>
        </span>
      </a-table>
    </a-spin>
  </div>
</template>

<script>
import { getCivilianListAPI } from '@/api/income.js'
export default {
  name: 'universaldividend',
  data() {
    return {
      loading: false,
      columns: [
        {
          title: '日期',
          dataIndex: 'date',
          width: 500,
          align: 'center'
        },
        {
          title: '状态',
          dataIndex: 'state_desc',
          align: 'center',
          scopedSlots: { customRender: 'state' }
        }
      ],
      data: []
    }
  },
  created() {
    this.getCivilianList()
  },
  methods: {
    async getCivilianList() {
      try {
        this.loading = true
        const { data } = await getCivilianListAPI({ brand_id: process.env.VUE_APP_BRAND_ID })
        this.data = data
      } finally {
        this.loading = false
      }
    },
    onPush(date) {
      this.$router.push({ path: 'detailpage', query: { date } })
    }
  }
}
</script>

<style lang="less" scoped>
.card {
  padding: 20px;
  background-color: #fff;
}
</style>
